<!--
 * @Description: 
 * @Author: Leequik
 * @Date: 2024-02-01 21:06:47
 * @LastEditTime: 2024-02-05 16:18:57
 * @LastEditors: Leequik
-->
<template>
    <div class="common" v-loading="loading">
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/report/import' }">报表管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{menu}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="meta-divder"></div>

    <el-row class="component-import">    
            <el-row class="wdh-search">
                <el-upload
                    ref="upload"
                    action="/report/uploadfile"
                    :limit="1"
                    :data="uploadData"
                    :on-exceed="handleExceed"
                    :on-success="fileSuccess"
                    :on-progress="fileUpload"
                    :on-error="uploadError"
                    :file-list="fileList"
                    :show-file-list="false">
                    <el-button slot="trigger" type="primary">选择文件<i class="el-icon-upload el-icon--right"></i></el-button>
                    <a :href="uploadData.template_file">
                        <el-button style="margin-left: 10px;" size="small" type="success">下载导入模板
                            <i class="el-icon-download el-icon--right"></i>
                        </el-button>
                    </a>
                    <el-row class="export-title">
                        <p>导入须知：</p>
                        <p>1.导入后，请在下面操作记录中查看导入进展，待状态为处理完成，可以查看导入是否成功</p>
                        <p>2.只能上传xlsx/xls文件，且不超过不超过{{ uploadData.number }}条数据</p>
                    </el-row>
                </el-upload>

                <el-row class="delivery-table" v-loading="table_loading">
                    <el-table :data="tableData" stripe max-height="230">
                        <el-table-column
                            prop="file_name"
                            label="标题"
                            width="200">
                        </el-table-column>
                        <el-table-column
                            prop="import_date"
                            label="时间"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="import_user"
                            label="操作人">
                        </el-table-column>
                        <el-table-column
                            prop="import_res"
                            label="操作结果">
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            width="80">
                            <template slot-scope="scope">
                                <a :href="'/home-api/import/result-export/'+ scope.row.id">
                                    <el-button type="text" size="mini">下载</el-button>
                                </a>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-col>
                        <v-pagination :pages="paging" :page_sizes="pageSizes" :limits="limit" :total="total"
                                    v-if="total > limit" @search="init"></v-pagination>
                    </el-col>
                </el-row>

            </el-row>
        
    </el-row>
    
    </div>  

</template>

<script>
    export default {
        data() {
            return {
                loading:false,
                menu:'报表导入',
               
                uploadData: {
                    number:2000,
                },
                fileList: [],   // 文件列表
                total: 1, // 总数
                limit: 10,
                paging: 1,
                pageSizes: [10, 20, 30, 40, 50],
                is_first: 0,
                tableData: [],
                table_loading: false,
                import_dialog: false

            
            }
        },
        mounted(){
            

        },

        methods: {
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },

            uploadUrl(){
                //return "/home-api/import?id=" + this.couponId;
            },
   
            init(data) {
                if (data) {
                    this.paging = data.page;
                    this.limit = data.limit;
                } else {
                    this.paging = 1;
                    this.limit = 10;
                }

                if (!this.is_first) {
                    this.loading = true;
                } else {
                    this.table_loading = true;
                }

                this.$http.get('/import/init', {
                    params: {
                    id: this.id,
                    limit: this.limit,
                    page: this.paging,
                    is_first: this.is_first
                    }
                }).then((res) => {
                    if (res.data.code === 200) {
                    if (!this.is_first) {
                        this.is_first = 1;
                        this.uploadData = res.data.data.setting;
                        this.uploadData.import_id = this.id;
                        this.uploadData._token = window.csrf_token;
                        this.loading = false;
                    } else {
                        this.table_loading = false;
                    }
                    this.tableData = res.data.data.data;
                    this.total = res.data.data.total;

                    } else {
                    this.$message(res.data.message);
                    }
                });
            },

            handleExceed() {
            this.$message.warning('当前限制选择1个文件');
            },
            submitUpload() {
            this.$refs.upload.submit();
            },
            fileUpload() {
            this.loading = true;
            },
            uploadError() {
            this.fileList = [];
            },

            fileSuccess(res) {
                this.loading = false;
                this.fileList = [];
                if (res.code === 200) {
                    this.$message.success('上传成功');
                    this.init();
                    if (res.data && res.data.length > 0 && parseInt(this.id) === 11) {
                    this.$emit('callBack', res.data);
                    } else {
                    this.$emit('callBack');
                    }

                } else {
                    this.$message.error(res.message);
                }
            },
     
        },

    }
</script>
<style>

    .common{     
        border-radius: 10px;
        background: #fff;
        margin: 10px;
        box-shadow: 1px 3px 7px 0 rgb(12 64 168 / 20%);
    }

    .breadcrumb{
        padding:20px;
        color:#666;
    }
    .backbutton{
        position: relative;
        float: right;
        top: -25px;
        right: 50px;
    }
    
    .is-link{
        color:#666!important;
    }
    .el-breadcrumb__item:hover  .is-link{
        color:#409EFF!important;
    }
    .meta-divder{
        font-weight: 400;
        font-size: 1rem;
        border-top: 1px solid #d3e0e9;
        border-bottom: 1px solid rgba(211,224,233,.15);
        margin: 1rem 0;
        line-height: 1;
        margin:0 20px;
    }
    .common-button{
        margin-bottom: 25px;
        background-color: #f2f7fa;
        width: 100%;
        text-align: center;
        height: 50px;
    }
    .page{
        float:right;
        margin-top: 10px;
    }

.component-import {

  .left-text {
    float: left;
    width: 85px;
    line-height: 36px;
    font-size: 16px;
  }

  .upload-cont {
    padding: 20px;
    border-bottom: 1px solid $--base-border-color;

    .upload-box {
      position: relative;
      margin-right: 10px;
      height: 34px;
      border: 1px solid $--table-border-color;

      .upload-demo {
        .el-upload .el-button {
          position: absolute;
          right: -1px;
          top: -1px;
          border: none;
          border-radius: 0;
        }

        ul {
          position: absolute;
          top: -6px;
          left: 4px;
        }
      }
    }

    .el-col-3 {
      .el-button {
        color: #437eff;
        border-color: #437eff;
      }
    }

    .tips {
      margin: 15px 0 20px;
      color: #8a8a8a;
      line-height: 22px;
    }
  }

  .export-box {
    @extend %pd10;
    @extend %mg10;

    .export-title {
      margin-bottom: 20px;
      line-height: 24px;
    }

    .delivery-table {
      margin-top: 20px;
      text-align: center;
      /*padding-bottom: 20px;*/

      .el-table th {
        background: $--table-bg-color;
      }

      .el-table td {
        padding: 10px 0;
      }
    }
  }

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__footer {
    text-align: center;
  }
}

    
</style>